<template>
	<view :class="[extraClass, 'text-' + textAlign, reverse ? 'flex flex-column flex-col-reverse' : '']">
		<view :class="[labelViewCls, reverse ? 'mt-0-4' : 'mb-0-4']">
			<text :class="[labelSize, labelColor, labelCls]">{{ label }}</text>
		</view>
		<view>
			<text :class="[valueFont, valueSize, valueColor, valueCls]">
				{{ isNullOrUndefOrEmpty(value) ? '--' : value }}
			</text>
			<text class="ml-1" :class="[unitSize, unitColor, unitCls]" v-if="unit">{{ unit }}</text>
		</view>
	</view>
</template>
<script>
import { isNullOrUndefOrEmpty } from '@/sl-uni-sdk/utils/common.js';
export default {
	props: {
		extraClass: String,
		value: [String, Number],
		valueSize: {
			type: String,
			default: 'text-xl',
		},
		valueColor: {
			type: String,
			default: 'color-main',
		},
		valueFont: {
			type: String,
			default: 'font-semibold',
		},
		valueCls: [String, Object],
		unit: String,
		unitSize: {
			type: String,
			default: 'text-xn',
		},
		unitColor: {
			type: String,
			default: 'color-secondary',
		},
		unitCls: [String, Object],
		label: String,
		labelSize: {
			type: String,
			default: 'text-m',
		},
		labelColor: {
			type: String,
			default: 'color-secondary',
		},
		labelCls: [String, Object],
		labelViewCls: [String, Object],
		textAlign: {
			type: String,
			default: 'center'
		},
		reverse: Boolean,
	},
	setup() {
		return {
			isNullOrUndefOrEmpty,
		};
	},
};
</script>
